import React, { Component } from 'react'
import {TabBar} from 'antd-mobile'
import {withRouter} from 'react-router-dom'
class TabBarExample extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        selectedTab: 'redTab',
        hidden: false,
        fullScreen: true,
      };
    }
  
    renderContent(pageText) {
      return (
        <div style={{ backgroundColor: 'white', height: '100%', textAlign: 'center' }}>
          <div style={{ paddingTop: 60 }}>Clicked “{pageText}” tab， show “{pageText}” information</div>
          <a style={{ display: 'block', marginTop: 40, marginBottom: 20, color: '#108ee9' }}
            onClick={(e) => {
              e.preventDefault();
              this.setState({
                hidden: !this.state.hidden,
              });
            }}
          >
            Click to show/hide tab-bar
          </a>
          <a style={{ display: 'block', marginBottom: 600, color: '#108ee9' }}
            onClick={(e) => {
              e.preventDefault();
              this.setState({
                fullScreen: !this.state.fullScreen,
              });
            }}
          >
            Click to switch fullscreen
          </a>
        </div>
      );
    }
  
    render() {
      return (
        <div style={this.state.fullScreen ? { position: 'fixed', height: '100%', width: '100%', top: 0 } : { height: 400 }}>
          <TabBar
            unselectedTintColor="#949494"
            tintColor="#ff2d4a"
            barTintColor="white"
            hidden={this.state.hidden}
          >
            <TabBar.Item
              title="首页"
              key="index"
              icon={
               <i className='iconfont icon-fangzi'></i>
              }
              selectedIcon={
                <i className='iconfont icon-fangzi' style={{ color: "#ff2d4a" }}></i>
              }
              selected={this.props.location.pathname === '/'}
            //   badge={1}
              onPress={() => {
                this.props.history.push('/')
                
              }}
              data-seed="logId"
            >
              {this.props.children}
            </TabBar.Item>
            <TabBar.Item
              icon={
               <i className='iconfont icon-fenlei'></i>
              }
              selectedIcon={
                <i className='iconfont icon-fenlei' style={{ color: "#ff2d4a" }}></i>
              }
              title="首页"
              key="index"
            //   badge={'new'}
              selected={this.props.location.pathname === '/category'}
              onPress={() => {
                this.props.history.push('/category')
                
              }}
              data-seed="logId1"
            >
              {this.props.children}
            </TabBar.Item>
            <TabBar.Item
               icon={
               <i className='iconfont icon-icon-'></i>
              }
              selectedIcon={
                <i className='iconfont icon-icon-' style={{ color: "#ff2d4a" }}></i>
              }
              title="购物车"
              key="Friend"
              
              selected={this.props.location.pathname === '/cart'}
              onPress={() => {
                this.props.history.push('/cart')
              }}
            >
              {this.props.children}
            </TabBar.Item>
            <TabBar.Item
              icon={
               <i className='iconfont icon-yonghu'></i>
              }
              selectedIcon={
                <i className='iconfont icon-yonghu' style={{ color: "#ff2d4a" }}></i>
              }
              
              title="我的"
              key="my"
              selected={this.props.location.pathname === '/my'}
              onPress={() => {
                this.props.history.push('/my')
                
              }}
            >
              {this.props.children}
            </TabBar.Item>
          </TabBar>
        </div>
      );
    }
  }
export default withRouter(TabBarExample)